<!-- 自定义开关组件 -->
<template>
    <view class="custom-switch" :class="[modelValue ? 'switch-active' : '', isDarkMode ? 'dark-mode' : '']"
        @click="toggle">
        <view class="switch-handle" :class="{ 'handle-active': modelValue }"></view>
    </view>
</template>

<script setup lang="ts">
import { isDarkMode } from '@/store/theme';

const props = defineProps<{
    modelValue: boolean;
}>();

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void;
    (e: 'change', value: { detail: { value: boolean } }): void;
}>();

const toggle = () => {
    const newValue = !props.modelValue;
    emit('update:modelValue', newValue);
    emit('change', { detail: { value: newValue } });
};
</script>

<style scoped>
.custom-switch {
    position: relative;
    width: 82rpx;
    height: 44rpx;
    background-color: #e1e1e1;
    border-radius: 22rpx;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: inset 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.switch-handle {
    position: absolute;
    left: 2rpx;
    top: 2rpx;
    width: 40rpx;
    height: 40rpx;
    background-color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.15);
}

.switch-active {
    background-color: var(--theme-color, #409EFF);
}

.handle-active {
    transform: translateX(38rpx);
}

/* 暗黑模式样式 */
.dark-mode {
    background-color: #333;
    box-shadow: inset 0 1rpx 2rpx rgba(0, 0, 0, 0.2);
}

.dark-mode .switch-handle {
    background-color: #fff;
    box-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.25);
}

.dark-mode.switch-active {
    background-color: var(--theme-color, #409EFF);
}
</style>